<template>
    <div class="cashw">
        <date-select
                ref="date"
                @selectDone="selected"
        ></date-select>
        <div class="top">
            <div
                    class="date"
                    @click="chooseTime"
            >
                {{text}}
                <svg
                        class="icon down"
                        aria-hidden="true"
                >
                    <use xlink:href="#icon-expandmore"></use>
                </svg>
            </div>
            <div
                    class="right"
                    v-show="stateScreen"
            >
                <div
                        class="choose"
                        @click="chooseType"
                >
                    <svg
                            class="icon icon-choose"
                            aria-hidden="true"
                    >
                        <use xlink:href="#icon-shaixuan"></use>
                    </svg>
                    筛选
                </div>
            </div>
        </div>
        <van-list
                v-model="loading"
                :finished="finished"
                @load="onLoad"
                :immediate-check="false"
                class="order"
        >
            <van-cell
                    v-for="(info, key) in list"
                    :key="key"
                    class="cell"
            >
                <money-cell-single
                        :info="info"
                        :type="type"
                ></money-cell-single>
                <div class="line"></div>
            </van-cell>
        </van-list>
        <div
                v-if="finished"
                class="no-more"
        >没有更多了
        </div>
        <van-popup
                v-model="showSelect"
                position="right"
                :close-on-click-overlay="false"
                :overlay="false"
        >
            <div class="select">
                <p class="title">类型筛选</p>
                <button
                        :class="{tag: 1, active: activeChoose === `${item.num}`}"
                        @click="choose(`${item.num}`)"
                        v-for="(item,index) in activeArray"
                >{{item.text}}
                </button>
            </div>
        </van-popup>
    </div>
</template>
<div>
</div>
<script>
    import API from '../../request/api';
    import moneyCellSingle from '../../components/User/moneyCellSingle.vue';
    import DateSelect from '../../components/common/date-select';
    import dayjs from 'dayjs';


    const FMT = 'YYYY-MM-DD HH:mm:ss';
    export default {
        /**
         * 余额提现记录
         */
        name: 'transAccountsRecord',
        components: {DateSelect, moneyCellSingle},
        data() {
            return {
                startDate: dayjs()
                    .startOf('month')
                    .format(FMT),
                endDate: dayjs().format(FMT),
                text: '本月',
                page: 0,
                list: [],
                loading: true,
                finished: false,
                activeChoose: 0,
                activeArray: [],
                showSelect: false,
                type: '',
                stateScreen: true,
                stateGet: false
            };
        },
        created() {
            let type = this.$route.query.type;
            this.type = type;
            if (type === '1') {
                // 余额提现记录
                this.activeArray = [
                    {text: '等待处理', num: '0'},
                    {text: '提现成功', num: '1'},
                    {text: '已退回', num: '2'}
                ];
            } else if (type === '6') {
                // 余额转账记录
                this.activeArray = [
                    {text: '转入', num: '1'},
                    {text: '转出', num: '2'}
                ];
            } else if (type === '5') {
                //    余额支付记录
                this.activeArray = [
                    {text: '收入', num: '1'},
                    {text: '支出', num: '2'}
                ];
            } else if (type === '2') {
                //    累计收益记录
                this.activeArray = [];
                this.stateScreen = false;
            } else if (type === '3') {
                //    未到账记录
                this.activeArray = [];
                this.stateScreen = false;
            }
            this.onLoad();
        },
        mounted() {
        },
        methods: {
            chooseTime() {
                this.$refs.date.show();
            },
            chooseType() {
                // 把筛选的条件导入弹窗中
                this.$refs.date.initDateMth();
                this.showSelect = true;
            },
            choose(type) {
                this.activeChoose = type;
                this.showSelect = false;
                this.page = 0;
                this.finished = false;
                this.list = [];
                this.loading = true;
                this.stateGet = true;
                this.onLoad();
            },
            onLoad() {
                if (this.finished === false) {
                    let data = {
                        page: this.page,
                        start_time: this.startDate,
                        end_time: this.endDate,
                        type: this.type,

                    };
                    if (this.type == '1' && !this.stateGet) {

                    } else {
                        data.category = this.activeChoose;
                    }
                    // this.receive = true;
                    this.request.get(API.earning, data).then(res => {
                        if (this.page === 0) {
                            this.list = res.list;
                        } else {
                            this.list = this.list.concat(res.list);
                        }
                        this.page++;
                        if (res.total_page <= this.page) {
                            this.finished = true;
                        }
                        this.loading = false;
                    }, () => {
                    });
                }
            },
            selected(arr, text) {
                this.startDate = arr[0];
                this.endDate = arr[1];
                this.text = text;
                this.page = 0;
                this.finished = false;
                this.list = [];
                this.loading = true;
                this.stateGet = true;
                this.onLoad();
            },
        },

    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import '~assets/main.styl';

    .cashw {
        overflow hidden
        box-sizing border-box

        .top {
            display: flex;
            justify-content: space-between;
            padding: 0 cellPadding;
            height: vw(40);
            align-items: center;
            background-color: grayF;

            .date {
                color: main-color;
                display: flex;
                align-items: center;

                .down {
                    width: vw(12);
                    height: vw(12);
                    margin-left: titleMargin;
                    fill: #666;
                }
            }

            .right {
                display: flex;
                align-items: center;
            }

            .choose {
                display: flex;
                align-items: center;

                .icon-choose {
                    width: vw(21);
                    height: vw(21);
                    margin-right: titleMargin;
                    margin-left: smallMargin;
                }
            }
        }

        .no-more {
            text-align: center;
            color: gray9;
            line-height: vw(30);
            margin-top: smallMargin;
        }

        .select {
            position: relative;
            background: grayF;
            width: 100vw;
            height: 100vh;
            box-sizing: border-box;
            padding: 0 cellPadding;
            overflow: hidden;

            .title {
                margin: smallMargin 0;
                line-height: vw(20);
                color: gray3;
                font-size: word14;
            }

            .tag {
                width: vw(70);
                height: vw(25);
                color: gray3;
                background-color: grayE;
                text-align: center;
                border-radius: 13px;
                margin-right: vw(20);

                &.active {
                    background-color: main-color;
                    color: grayF;
                }
            }
        }

        .order {
            background-color: grayF;
            margin-top: smallMargin;

            .line {
                line();
            }
        }

        >>> .van-cell {
            padding: 0;
        }
    }
</style>
